<template>
  <div class="container">
    <div style="display: flex; justify-content: space-between">
      <div class="left">
        <el-row :gutter="20" class="mgb20">
          <div class="t1">数据分析</div>
          <el-col :span="6" class="vol">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-s-home grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">
                    {{ topValue.numberOfUsers }}
                  </div>
                  <div class="t8">员工数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <i class="el-icon-s-custom grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ topValue.customerNum }}</div>
                  <div class="t8">客户数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <i class="el-icon-s-order grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">
                    {{ topValue.orderNum }}
                  </div>
                  <div class="t8">订单数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-4">
                <i class="el-icon-coin grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ topValue.orderMoney }}元</div>
                  <div class="t8">订单金额</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card shadow="hover">
              <div class="index_Bottom">
                <div
                  style="margin-bottom: 10px; font-size: 19px; font-weight: 700"
                >
                  数据简报
                </div>
              </div>
              <div class="index_Data clearfix">
                <div class="box">
                  <div class="box2" @click.stop="customer(1)">
                    <span class="t2">{{ realValue.waitCheck }}</span>
                    <span class="t3">待审核订单</span>
                  </div>
                </div>
                <div class="box">
                  <div class="box2" @click.stop="customer(2)">
                    <span class="t2">{{ realValue.cancelOrder }}</span>
                    <span class="t3">已取消订单</span>
                  </div>
                </div>
                <div class="box">
                  <div class="box2" @click.stop="customer(3)">
                    <span class="t2">{{ realValue.waitJie }}</span>
                    <span class="t3">待接单订单</span>
                  </div>
                </div>
                <div class="box" style="border: none">
                  <div class="box2" @click.stop="customer(4)">
                    <span class="t2">{{ realValue.ing }}</span>
                    <span class="t3">处理中</span>
                  </div>
                </div>
              </div>
              <div
                style="border-top: 1px solid #ddd"
                class="index_Data clearfix"
              >
                <div class="box">
                  <div class="box2" @click.stop="customer(5)">
                    <span class="t2">{{ realValue.waitchuzheng }}</span>
                    <span class="t3">待出证订单</span>
                  </div>
                </div>
                <div class="box">
                  <div class="box2" @click.stop="customer(6)">
                    <span class="t2">{{ realValue.waitqianshou }}</span>
                    <span class="t3">待签收订单</span>
                  </div>
                </div>
                <div class="box">
                  <div class="box2" @click.stop="customer(7)">
                    <span class="t2">{{ realValue.finishOrder }}</span>
                    <span class="t3">已完成订单</span>
                  </div>
                </div>
                <div class="box" style="border: none" @click="customer(-1)">
                  <div class="box2">
                    <span class="t2">{{ realValue.rejectOrder }}</span>
                    <span class="t3">已拒绝订单</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card shadow="hover">
              <div class="countCallNumber">
                <h6 style="margin-bottom: 10px; font-size: 19px">
                  订单分析
                  <el-date-picker
                    v-model="yearValue"
                    type="year"
                    @change="getCountCallNumber"
                    placeholder="选择年份"
                  ></el-date-picker>
                </h6>
              </div>
              <div class="schart-box">
                <div
                  id="myChart"
                  ref="order"
                  style="height: 320px; width: 100%;display: inline-block;"
                ></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {
  getNumber_zixun,
  getOrderData,
  getCertData
} from "@/api/index";
import { setTimeout } from 'timers';
export default {
  data() {
    return {
      monthX: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ],
      topValue: {
        numberOfUsers: null
      },
      orderValue: null,
      realValue: {},
      waitCheck_index: null,
      cancelOrder_index: null,
      waitJie_index: null,
      ing_index: null,
      waitchuzheng_index: null,
      waitqianshou_index: null,
      finishOrder_index: null,
      rejectOrder_index: null,
      // 年度选择
      yearValue: null,
      // 折线数据
      y: [],
      z: []
    };
  },
  components: {},
  computed: {},
  watch: {},
  filters: {
    formatDate: function(value) {
      let date = new Date(parseInt(value) * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = date.getMinutes();
      let second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d;
    },
    formatDate2: function(value) {
      let date = new Date(parseInt(value) * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = date.getMinutes();
      let second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    num1: function(value) {
      return value.toFixed(2);
    }
  },
  created() {
    var date = new Date();
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    // this.monthvalue = y + "-" + m;
    this.yearValue = new Date();
    this.getTop();
    this.getData();
  },
  mounted() {
    this.getCountCallNumber();
  },
  methods: {
    formatMoney: function(val) {
      return (val / 10000).toFixed(2);
    },
    // 跳转订单页面
    customer(e) {
      this.$router.push({
        name: "OrderList_zixun",
        params: {
          state: e
        }
      });
    },
    // 获取顶部的四个数据
    getTop() {
     getNumber_zixun().then(res => {
       if(res.code == 200){
        this.topValue = res.data;
       }
     })
    },
    // 获取中间的八个数据
    getData() {
      getOrderData().then(res => {
        if(res.code == 200){
          // console.log(res.data);
          this.orderValue = res.data;
          this.waitCheck_index = this.orderValue.findIndex(item => {
            return item.name == 1
          });
          if(this.waitCheck_index == -1){
            this.realValue.waitCheck = 0;
          }else{
            this.realValue.waitCheck = this.orderValue[this.waitCheck_index].num;
          }


          this.cancelOrder_index = this.orderValue.findIndex(item => {
            return item.name == 2
          });
          if(this.cancelOrder_index == -1){
            this.realValue.cancelOrder = 0;
          }else{
            this.realValue.cancelOrder = this.orderValue[this.cancelOrder_index].num;
          }


          this.waitJie_index = this.orderValue.findIndex(item => {
            return item.name == 3
          });
          if(this.waitJie_index == -1){
            this.realValue.waitJie = 0;
          }else{
            this.realValue.waitJie = this.orderValue[this.waitJie_index].num;
          }


          this.ing_index = this.orderValue.findIndex(item => {
            return item.name == 4
          });
          if(this.ing_index == -1){
            this.realValue.ing = 0;
          }else{
            this.realValue.ing = this.orderValue[this.ing_index].num;
          }


          this.waitchuzheng_index = this.orderValue.findIndex(item => {
            return item.name == 5
          });
          if(this.waitchuzheng_index == -1){
            this.realValue.waitchuzheng = 0;
          }else{
            this.realValue.waitchuzheng = this.orderValue[this.waitchuzheng_index].num;
          }



          this.waitqianshou_index = this.orderValue.findIndex(item => {
            return item.name == 6
          });
          if(this.waitqianshou_index == -1){
            this.realValue.waitqianshou = 0;
          }else{
            this.realValue.waitqianshou = this.orderValue[this.waitqianshou_index].num;
          }


          this.finishOrder_index = this.orderValue.findIndex(item => {
            return item.name == 7
          });
          if(this.finishOrder_index == -1){
            this.realValue.finishOrder = 0;
          }else{
            this.realValue.finishOrder = this.orderValue[this.finishOrder_index].num;
          }


          this.rejectOrder_index = this.orderValue.findIndex(item => {
            return item.name == -1
          });
          if(this.rejectOrder_index == -1){
            this.realValue.rejectOrder = 0;
          }else{
            this.realValue.rejectOrder = this.orderValue[this.rejectOrder_index].num;
          }
          // console.log(this.realValue,'处理后数据')
        }
      })
    },
    // 获取订单折线数据
    getCountCallNumber() {
      let params;
      params = {
        year: this.yearValue.getFullYear(),
      };
      getCertData(params).then(res => {
        if (res.code == 200) {
          this.y = res.data.y;
          this.z = res.data.z;
         setTimeout(() => {
            this.drawLineData();
         }, 500)
        }
      })
    },
    drawLineData() {
      let box = document.getElementById('myChart')
      if (box) {
        let myChart = echarts.init(box);
        console.log(myChart)
        myChart.setOption({
          xAxis: {
            data: this.monthX,
            boundaryGap: false,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false //去掉网格线
            },
            // 间隔显示
            axisLabel: {
              // interval: 1
            }
          },
          grid: {
            left: 40,
            right: 60,
            bottom: 0,
            top: 50,
            containLabel: true
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line"
            },
            padding: [5, 10]
          },
          yAxis: [
            {
              type: "value",
              name: "订单数量",
              yAxisIndex: 0,
              splitNumber: 10,
              axisLabel: {
                formatter: "{value}"
              },
              splitLine: {
                show: false //去掉网格线
              }
            },
            {
              type: "value",
              name: "订单金额/元",
              yAxisIndex: 1,
              splitNumber: 10,
              axisLabel: {
                formatter: "{value}"
              },
              splitLine: {
                show: false //去掉网格线
              }
            }
          ],
          legend: {
            data: ["订单数量","订单金额"]
          },
          series: [
            {
              name: "订单数量",
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  color: "#099cf8",
                  lineStyle: {
                    color: "#099cf8",
                    width: 2
                  }
                }
              },
              smooth: true,
              type: "line",
              data: this.y,
              animationDuration: 3000,
              animationEasing: "cubicInOut"
            },
            {
              name: "订单金额",
              yAxisIndex: 1,
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#ff8c2d",
                  lineStyle: {
                    color: "#ff8c2d",
                    width: 2
                  }
                }
              },
              data: this.z,
              animationDuration: 3000,
              animationEasing: "quadraticOut"
            }
          ]
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px 30px;
}
.left {
  width: 100%;
}
.el-card {
  border-radius: 6px;
}
.left .t1 {
  font-size: 19px;
  color: #222;
  margin: 10px 0;
  box-sizing: border-box;
  // padding-left: 30px;
  font-weight: 700;
  margin-left: 20px;
}

.top8 {
  background-color: #fff;
  height: 50px;
  width: 100%;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.countCallNumber h4 {
  width: 100%;
  float: left;
}
.countCallNumber img {
  width: 25px;
  height: 25px;
  float: right;
  margin-right: 10px;
  margin-top: -3px;
}
.countCallNumber {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  justify-content: flex-start;
}
.countCallNumber span {
  float: right;
  font-size: 14px;
  color: #666;
}
.countCallNumber h6 {
  display: inline-block;
  width: 50%;
  margin-top: 3px;
}
.countCallNumber h6 span {
  float: none;
}
.countCallNumber span i {
  font-style: normal;
  color: #000;
  display: flex;
  justify-content: space-between;
}
.countCallNumber .right {
  width: 60%;
  display: flex;
  justify-content: flex-start;

  .box {
    display: flex;
    // width: 50%;
    // width: 200px;
    margin-right: 15px;
    justify-content: center;
    align-items: center;
    .t1 {
      font-size: 20px;
      color: #888585;
    }
    .t2 {
      font-size: 20px;
      color: #33abf3;
      font-weight: bold;
    }
    .t3 {
      font-size: 20px;
      color: #ff9f52;
      font-weight: bold;
    }
    .t4 {
      font-size: 20px;
      color: #42b871;
      font-weight: bold;
    }
  }
}
.el-row {
  margin-bottom: 20px;
}
.index_Data {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px 0;
}
.index_Data .box {
  width: 25%;
  float: left;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  // padding-left: 10px;
  border-right: 1px solid #cccccc;
  img {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .img {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .img2 {
    display: inline-block;
    width: 46px;
    height: 46px;
    border-radius: 50%;
  }
  .box1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 15px;
    .t2 {
      font-size: 25px;
      color: #555;
      font-weight: 550;
      // text-align: center;
    }
    .t3 {
      font-size: 16px;
      color: #888585;
    }
  }
  .box2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 15px;
    cursor: pointer;
    .t2 {
      font-size: 25px;
      color: #555;
      font-weight: 550;
      // text-align: center;
    }
    .t3 {
      font-size: 16px;
      color: #888585;
    }
  }
  .box2:hover {
    .t2 {
      font-size: 25px;
      color: #33abf3;
      font-weight: 550;
      // text-align: center;
    }
    .t3 {
      font-size: 16px;
      color: #33abf3;
    }
  }
}

.el-row {
  margin-bottom: 20px;
}
.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}
.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}
.grid-num {
  font-size: 30px;
  font-weight: bold;
}
.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}
.grid-con-1 .grid-con-icon {
  background: #33abf3;
}
.grid-con-1 .grid-num {
  color: #33abf3;
}
.grid-con-2 .grid-con-icon {
  background: #81dae2;
}
.grid-con-2 .grid-num {
  color: #81dae2;
}
.grid-con-3 .grid-con-icon {
  background: #b6a1dc;
}
.grid-con-3 .grid-num {
  color: #b6a1dc;
}
.grid-con-4 .grid-con-icon {
  background: #ff9f52;
}
.grid-con-4 .grid-num {
  color: #ff9f52;
}
.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}
.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}
.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}
.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}
.user-info-list span {
  margin-left: 70px;
}
.mgb20 {
  margin-bottom: 20px;
}
.todo-item {
  font-size: 14px;
}
.todo-item-del {
  text-decoration: line-through;
  color: #999;
}
.schart {
  width: 100%;
  height: 300px;
  position: relative;
}
.t8 {
  color: #333;
  font-size: 15px;
  font-weight: 550;
}
.schart-box {
    box-sizing: border-box;
  display: inline-block;
  padding: 20px;
  width: 100%;
}
.schart {
  width: 680px;
  height: 400px;
}
.content-title {
  clear: both;
  font-weight: 400;
  line-height: 50px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}
.right1 {
  position: relative;
  padding-top: 30px;
  // height: 500px;
  .top {
    position: absolute;
    top: 10px;
    left: 0;
    color: #fff;
    background-color: #33abf3;
    border-radius: 0 20px 20px 0;
    padding: 4px 18px;
    font-size: 22px;
    cursor: pointer;
  }
  .scroll {
    overflow-y: auto;
    max-height: 368px;
  }
  .scroll2 {
    overflow-y: auto;
    max-height: 400px;
  }
  .scroll::-webkit-scrollbar {
    width: 0;
  }
  .scroll2::-webkit-scrollbar {
    width: 0;
  }
  .info {
    border-bottom: 1px solid #cccccc;
    padding: 10px 0;
    position: relative;
    h4 {
      font-size: 19px;
      color: #333;
      margin: 10px 0 !important;
    }
    .tt {
      color: #979595;
      margin-top: 5px;
      font-size: 17px;
      font-family: PingFangSC-Semibold, sans-serif;
    }
    .c1 {
      color: #ff9f52;
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
    }
    .c2 {
      color: #33abf3;
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 17px;
    }
  }
  .top2 {
    position: absolute;
    top: 10px;
    left: 0;
    color: #fff;
    background-color: #ff9f52;
    border-radius: 0 20px 20px 0;
    padding: 4px 18px;
    font-size: 22px;
  }
  .info2 {
    border-bottom: 1px solid #cccccc;
    position: relative;
    margin-top: 10px;
    h3 {
      font-size: 18px;
      color: #222;
    }
    .tt {
      color: #333;
      margin-top: 5px;
      font-size: 17px;
      font-weight: 550;
      position: relative;
      font-family: PingFangSC-Semibold, sans-serif;
    }
    .ttt {
      font-size: 16px;
      color: #888;
      margin-top: 5px;
      font-family: PingFangSC-Semibold, sans-serif;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .tttt {
      font-size: 14px;
      color: #888;
      margin-top: 5px;
      font-family: PingFangSC-Semibold, sans-serif;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .dian {
      font-weight: bold;
      color: #555;
      font-size: 16px;
      position: absolute;
      top: 50%;
      left: -15px;
      transform: translateY(-50%);
    }
  }
}
.center6 {
  width: 90%;
  margin: 0 auto;
  .top {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-size: 24px;
  }
  .ccc {
    width: 100%;
    margin-top: 20px;
    font-size: 16px;
  }
  .gif {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
}

.table-content {
  max-height: 300px;
  overflow: hidden;
}
.ul1 {
  width: 100%;
  span {
    display: inline-block;
    text-align: center;
    width: 33%;
    padding: 20px 0;
  }
}
.ul2 {
  width: 100%;
  li {
    box-sizing: border-box;
    padding: 10px 0;
    background-color: #4e6ef2;
    color: #ffffff;
    margin-top: 5px;
    span {
      display: inline-block;
      width: 33%;
      text-align: center;
    }
  }
}
</style>
